<template>
  <div>
    <el-tooltip placement="bottom" effect="light" :[visibleVal]="false">
      <template #content>
        <div style="max-height: 20vh; overflow: scroll">
          <div
            v-for="(item, index) in state.allSelectedData"
            :key="index"
            style="display: flex; align-items: center; font-size: 15px; line-height: 29px"
          >
            <el-button circle size="small" @click="deleteSelectedItem(index)">
              <Delete style="margin-right: 0" />
            </el-button>
            <span>{{ getShowInfo(item) }}</span>
          </div>
        </div>
      </template>
      <el-input
        v-model="state.keyword"
        placeholder="请输入关键字"
        class="input-with-select"
        @keyup.enter="openDialog()"
        @click="openDialog()"
        :disabled="props.config.disabled"
      >
        <template #append>
          <el-button @click="openDialog()" :disabled="props.config.disabled">
            <el-icon>
              <Search style="margin-right: 0" />
            </el-icon>
          </el-button>
        </template>
      </el-input>
    </el-tooltip>
    <MyDialog
      ref="myDialogRef"
      :get-data-function="props.config.getDataFunction"
      :keyword="state.keyword"
      :detail-prop-list="props.config.detailPropList"
      :search-config="props.config.searchConfig"
      :multiple-select="props.config.multipleSelect"
      :all-selected-data="state.allSelectedData"
      :selected-prop-list="props.config.selectedPropList"
      @emitReturnInfo="handleReturnInfo"
    />
  </div>
</template>
<script setup>
import { ref, computed, watch, defineExpose, defineProps, reactive } from "vue";
import MyDialog from "./base-ui/MyDialog.vue";
import { Search, Delete } from "@element-plus/icons-vue";
const emit = defineEmits(["update:modelValue"]);
const props = defineProps({
  config: {
    //v-model的字段,父组件传来的
    type: Object,
    require: true,
    default: () => ({})
  },
  modelValue: {
    //v-model的字段,父组件传来的
    type: Object,
    require: false,
    default: () => ({})
  }
});
const state = reactive({
  keyword: "",
  allSelectedData: []
});

const visibleVal = computed(() => {
  //在组件没有选中值时,给气泡组件加一个:visible='false',这样就不会有气泡了.如果选中了值,那就加一个别的没用的变量比如:biubiubiu='false'
  if (state.allSelectedData?.length > 0) {
    return "biubiubiu";
  } else {
    return "visible";
  }
});
const datas = ref([]);
const myDialogRef = ref(null);
const handleReturnInfo = data => {
  //拿到数据对数据处理
  state.allSelectedData = data;
  myDialogRef.value.showDialog = false;
};
const openDialog = () => {
  myDialogRef.value.showDialog = true;
};
watch(
  () => state.allSelectedData,
  n => {
    if (n) {
      setTimeout(() => {
        state.keyword = n.map(item => item[`${props.config.returnShowColomn}`]).join(",");
        let res;
        if (props.config.returnValueColomn) {
          res = n.map(item => item[`${props.config.returnValueColomn}`]);
        } else {
          res = n;
        }
        emit("update:modelValue", res);
      });
    }
  },
  {
    deep: true
  }
);
watch(
  () => props.modelValue,
  n => {
    if (n && Array.isArray(n)) {
      state.allSelectedData = n;
    } else {
      state.allSelectedData = [];
    }
  },
  {
    deep: true,
    immediate: true
  }
);
watch(
  () => props.config.keyword,
  n => {
    if (state) {
      state.keyword = n;
    }
  },
  { immediate: true }
);
const getShowInfo = item => {
  if (props.config.tooltip && props.config.tooltip.length > 0) {
    //首先查看有没有定义气泡
    let showList = [];
    for (let i = 0; i < props.config.tooltip.length; i++) {
      let colomn = props.config.tooltip[i]; //'name'
      let a = item[`${colomn}`];
      a && showList.push(a);
    }
    return showList.join(">>");
  }
  if (props.config.returnShowColomn) {
    //如果没有,那么取回显值即可
    return item[`${props.config.returnShowColomn}`];
  }
};
const reset = () => {
  state.allSelectedData = undefined;
};
const clearKeyWord = () => {
  state.keyword = "";
};
const deleteSelectedItem = index => {
  state.allSelectedData.splice(index, 1);
};
defineExpose({
  datas, //真正的数据在这里!!
  reset,
  clearKeyWord
});
</script>
<style scoped></style>
